<template>
  <div class="scheme">
    <!-- tit -->
    <div class="tit">
      <h2>合作方案</h2>
      <div class="blue-box"></div>
      <p>一诺万金，多种商务合作模式，总有一款适合您</p>
    </div>
    <!-- con -->
    <div class="con">
      <!-- 左侧 -->
      <div class="con-left">
        <!-- 每一项 -->
        <div
          class="item-box"
          v-for="item in message"
          :key="item.mainTit"
        >
          <!-- 标题 -->
          <div class="item-tit">
            <img :src="item.img" alt="">
            <span>{{ item.mainTit }}</span>
          </div>
          <!-- 内容 -->
          <div class="item-con">
            <p>{{ item.conText }}</p>
          </div>
        </div>
      </div>
      <!-- 右侧 -->
      <div class="con-right">
        <img src="../../../assets/img/team/fa.gif" alt="">
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: "Scheme",
    data() {
      return {
        message: [
          {
            img: require("../../../assets/img/team/fa1.gif"),
            mainTit: "项目式合作",
            conText: "以项目报备为依据，合作双方彼此做好分工，共同负责项目的商务运作及落地实施，双方按照合同额进行分成收益。"
          },
          {
            img: require("../../../assets/img/team/fa2.gif"),
            mainTit: "授权服务商",
            conText: "以行政区域划分为依据，以独立的城市辖区为参考，授权服务商为该区域的合法经销商，独立负责一诺万金平台全系列产品的销售、运营服务及权益的享受。"
          },
          {
            img: require("../../../assets/img/team/fa3.gif"),
            mainTit: "事业合伙人",
            conText: "一诺万金团队志在打造一个开放性的大事业平台，吸引更多有资源、有能量的合伙人一起做大做强事业，未来共享资本收益，事业合伙人为公司股东，享受股东级别的权利和义务。"
          },
        ]
      }
    }
  }
</script>

<style>
  .scheme {
    width: 62.5%;
    margin: 40px auto;
    text-align: center;
  }

  /* 标题 */
  .scheme .tit {
    margin-bottom: 24px;
  }

  .scheme .tit h2 {
    font-size: 36px;
    font-weight: 1000;
    color: #333;
  }

  .scheme .tit .blue-box {
    width: 64px;
    height: 8px;
    background: linear-gradient(90deg, #2f6bee, #009fff);
    border-radius: 8px;
    margin: 8px auto;
  }

  .scheme .tit p {
    font-size: 16px;
    color: #666;
  }

  /* 内容 */
  .scheme .con {
    background-color: #fff;
    box-shadow: 0 0 10px #f5f5f5;
    padding: 0 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .scheme .con:hover {
    transition-duration: 0.3s;
    transform: translateY(-5px);
  }

  .scheme .con .con-left {
    text-align: left;
  }

  .scheme .con .con-left .item-box {
    padding: 24px 0;
  }

  .scheme .con .con-left .item-box .item-tit {
    margin-bottom: 16px;
    display: flex;
    align-items: center;
  }

  .scheme .con .con-left .item-box .item-tit span {
    font-size: 20px;
    font-weight: 1000;
    color: #333;
    margin-left: 8px;
  }

  .scheme .con .con-left .item-box .item-con {
    width: 440px;
    text-align: justify;
  }

  .scheme .con .con-left .item-box .item-con p {
    font-size: 16px;
    color: #666;
  }

  .scheme .con .con-right {
    margin-right: -100px;
  }

  .scheme .con .con-right img {
    height: 530px;
  }
</style>